<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="all">
    <meta name="author" content="Tencent-CP">
    <meta name="Copyright" content="Tencent">
    <meta name="description"
          content=""/>
    <meta name="keywords"
          content=""/>
    <title>棋子</title>
    <link rel="stylesheet" type="text/css" href="Public/Static/Lol/css/index.css"/>
    <link rel="stylesheet" href="Public/Plug/layui/css/layui.css" media="all">
</head>
<style>
    body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form {
        margin: 0;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        padding: 0;
        margin: 0;
    }


    em, b {
        font-style: normal;
    }

    a {
        text-decoration: none;
    }

    img {
        border: 0;
    }

    button, input, select, textarea {
        font-size: 100%;
        outline: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td, th, ul, ol {
        padding: 0;
        list-style: none;
    }

    body {
        background-color: #431f8c;
        font-family: "Microsoft YaHei" !important;
    }

    .clearfix:after {
        content: " ";
        clear: both;
        height: 0;
        visibility: hidden;
        display: block;
    }

    .clearfix {
        *zoom: 1;
    }

    .hide {
        height: 0;
        line-height: 0;
        font-size: 0;
        visibility: hidden;
        display: none;
    }

    body, #ost_box, #footer_ied, .body-box {
        min-width: 1200px;
        width: 100%;
        _width: expression((document.documentElement.clientWidth||document.body.clientWidth)<1202?'1200px':'');
    }

    /*footer*/
    #footer_ied {
        margin-top: -110px;
        z-index: 999;
        position: relative;
        background: #431f8c;
    }

    .wrap_ied {
        font: 12px verdana;
        text-align: center;
        padding: 30px 0;
    }

    .wrap_ied, .wrap_ied a {
        color: #fff;
    }

    .wrap_ied .e {
        font-size: 10px;
        padding: 3px 0;
        -webkit-text-size-adjust: none;
    }

    * {
        box-sizing: border-box;
    }

    .main {
        width: 100%;
        margin: 0 auto;
        background: #fff;
        padding: 20px 20px 0;
    }

    .main .top {
        width: 800px;
        display: flex;
        flex-wrap: wrap;
    }

    .main .top li {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main .top li img {
        display: block;
        width: 80px;
        height: 80px;
    }

    .main .status {
        width: 100%;
    }

    .main .status1 {
        display: flex;
        flex-wrap: wrap;
    }

    .main .status1 .box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .main .status1 .item {
        width: 48%;
        margin-bottom: 10px;
    }

    .main .status1 p {
        text-align: left;
        line-height: 24px;
        color: #000;
        float: left;
    }

    .main .status1 .p1 {
        width: 100px;
        height: 24px;
    }

    #race-list div {
        display: block;
    }

    #job-list div {
        display: block;
    }

    li.active img {
        border: 4px solid red;
    }

    #chess-list li {
        width: 80px;
        height: 80px;
        border: 1px solid black;
    }

    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
    table {
        table-layout:fixed
    }
    td {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
</style>
<body style="background: #000;">
<div class="main">
    <div class="status status2" style="display: block;">
        <form class="layui-form" id="chess-form">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>属性/数值</legend>
            </fieldset>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">TFTID</label>
                    <div class="layui-input-inline">
                        <input type="number" name="TFTID" class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">棋子ID</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="chessId" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">魔抗</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="spellBlock" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">棋子中文名</label>
                    <div class="layui-input-inline">
                        <input name="displayName" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">棋子英文名</label>
                    <div class="layui-input-inline">
                        <input name="name" lay-verify="required" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">棋子称号</label>
                    <div class="layui-input-inline">
                        <input name="title" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">攻击速度</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="attackSpeed" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">棋子费用</label>
                    <div class="layui-input-inline">
                        <input type="number" name="price" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">攻击范围</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="attackRange" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">暴击率</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="crit" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">护甲</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="armor" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">法力</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="magic" class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">初始攻击力</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="attack" class="layui-input">

                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">攻击力系数</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="attackMag" class="layui-input">
                    </div>
                    <div class="layui-input-inline">攻击力详情：<span id="show-attack"></span></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">初始生命值</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="life" class="layui-input">
                    </div>

                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">生命值系数</label>
                    <div class="layui-input-inline">
                        <input type="number" lay-verify="required" name="lifeMag" class="layui-input">
                    </div>
                    <div class="layui-input-inline">生命值详情：<span id="show-life"></span></div>
                </div>
            </div>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">种族</label>
                    <div class="layui-input-inline">
                        <span id="race-list"></span>
                        <button id="select-race" type="button" class="layui-btn layui-btn-sm">
                            <i class="layui-icon"></i>
                        </button>
                        <input type="hidden" name="raceIds" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">职业</label>
                    <div class="layui-input-inline">
                        <span id="job-list"></span>
                        <button id="select-job" type="button" class="layui-btn layui-btn-sm">
                            <i class="layui-icon"></i>
                        </button>
                        <input type="hidden" name="jobIds" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">特殊说明</label>
                    <div class="layui-input-block" style="margin-left: 85px;">
                        <textarea name="illustrate" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>协同</legend>
            </fieldset>
            <div class="layui-form-item">
                <div class="layui-upload-list" id="synergies-div">
                    <!--协同的所有图片-->
                </div>
                <img src="Public/Static/Lol/image/static/upload.jpg"
                     class="layui-upload-img synergies-click">
                <input type="hidden" name="synergies" value="">
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>技能</legend>
            </fieldset>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">技能名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="skillName" lay-verify="required" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="image">更换图标</button>
                <div class="layui-upload-list">
                    <img style="width: 70px;height: 70px;" class="layui-upload-img" src="" id="image-path">
                    <input type="hidden" name="skillImage" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">技能类型</label>
                    <div class="layui-input-inline">
                        <select name="skillType" lay-verify="required">
                            <option value="主动">主动</option>
                            <option value="被动">被动</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">技能描述</label>
                <div class="layui-input-block" style="margin-left: 85px;">
                    <textarea name="skillIntroduce" lay-verify="required" placeholder="请输入内容"
                              class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">技能详情</label>
                <div class="layui-input-block" style="margin-left: 85px;">
                    <textarea name="skillDetail" lay-verify="required" placeholder="请输入内容"
                              class="layui-textarea"></textarea>
                </div>
            </div>


            <div class="layui-upload">
                <button type="button" class="layui-btn" id="original-image">原图</button>
                <div class="layui-upload-list">
                    <div id="original-image-path">

                    </div>
                    <input type="hidden" name="originalImage" value="">
                </div>
            </div>

            <button type="button" lay-submit lay-filter="chess-add" class="layui-btn layui-btn-normal">保存</button>

        </form>

        <form class="layui-form" onsubmit="return false" id="synergies-form" style="margin: 20px;display: none"  >
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input synergies-input">
                </div>
            </div>
            <table class="layui-table">
                <thead>
                <tr>
                    <th width="60"><!--<input type="checkbox" name="ids" lay-filter="SynergiesAllCheckbox">--></th>
                    <th>种族</th>
                    <th>职业</th>
                    <th>中文名</th>
                </tr>
                </thead>
                <tbody id="synergies-list">

                </tbody>
            </table>
        </form>
    </div>
</div>
</body>

<!--引用插件-->
<script type="text/javascript" src="Public/Plug/layui/layui.all.js"></script>
<script type="text/javascript" src="Public/Plug/jquery/jquery-3.3.1.min.js"></script>
<script src="//ossweb-img.qq.com/images/js/comm/showDialog.min.js"></script>
<script>
    var CONF = {};
    CONF.races = {$races};
    CONF.jobs = {$jobs};
    CONF.TFTIDs = {$TFTIDs};
    var is_update = true;
</script>
<script src="Public/Static/Lol/js/chees.js?v=19"></script>
</html>